<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户更改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="../../layuimini/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .upload {
            float: left;
            margin-left: 100px;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="dishesEdit">
    <div class="layui-form-item">
        <label class="layui-form-label required">菜品名</label>
        <div class="layui-input-block">
            <input type="text" name="dname" lay-verify="required" lay-reqtext="菜品名不能为空"
                   placeholder="请输入菜品名"
                   value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" lay-verify="required" lay-reqtext="价格不能为空"
                   placeholder="请输入价格" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">折扣</label>
        <div class="layui-input-block">
            <input type="number" name="discount" lay-reqtext="折扣不能为空"
                   placeholder="请输入折扣" class="layui-input">
        </div>
    </div>

    <div id="zyupload" class="zyupload upload"></div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
</div>
<script src="../../layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //获取session
        var layuiSession = sessionStorage.getItem("dishesEdit");
        var dishes = JSON.parse(layuiSession).info;
        var did = dishes[0].did;
        console.log(dishes)
        console.log(did)

        //回显
        form.val('dishesEdit', {
            "dname": dishes[1].dname,
            "price": dishes[2].price,
            "discount": dishes[3].discount,
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });

            var data = data.field
            console.log(data)
            $.ajax({
                url: "http://localhost:8080/order/dishesUpdateServlet",
                type: "POST",
                async: false,
                dataType: "json",
                data: {
                    "did": did,
                    "dname": data.dname,
                    "price": data.price,
                    "discount": data.discount
                },
                error: (err) => {
                    window.location = '404.html';
                }
            })

            return false;
        });

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r !== null)
                return unescape(r[2]);
            return null;
        }

    });
</script>
<script type="text/javascript">
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px",                 // 宽度
            height: "220px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "http://localhost:8080/order/uploadPhoto",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: false,                    // 是否可以多个文件上传
            dragDrop: false,                    // 是否可以拖动上传文件
            tailor: false,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
                //保存路径到数据库
                $.ajax({
                    type: 'post',
                    contentType: 'application/json',
                    url: 'http://localhost:8080/order/insertPhoto',
                    processData: false,
                    dataType: 'json',
                    data: JSON.stringify({}),
                    success: function (data) {
                        if (data.requestResult.success) {
                            myAlert("提示", data.requestResult.successMsg);
                        } else {
                            myAlert("提示", data.requestResult.errorMsg);
                        }
                    },
                    error: function () {
                        myAlert("警告", "请求失败");
                    }
                });
            }
        });
    });
</script>
</body>
</html>
